<template>
	<div class="addVideo">
		<el-dialog
			title="关联赛事"
			:visible.sync="dialogVisible"
			width="900px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="form"
				:inline="true"
				size="small"
				:model="forms"
				class="form"
				label-width="100px"
				style="display: flex; flex-wrap: wrap"
			>
				<el-form-item label="赛事名称" prop="race_name">
					<el-input
						v-model="forms.race_name"
						placeholder="请输入赛事名称"
						clearable
						style="width: 200px"
					/>
				</el-form-item>
				<p class="line">
					<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
						搜索
					</el-button>
				</p>
			</el-form>
			<el-table
				ref="table"
				size="small"
				stripe
				border
				:data="tableData"
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column label="序号" width="60px" type="index" />
				<el-table-column
					label="赛事编号"
					prop="race_id"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事名称"
					prop="race_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事城市"
					prop="city_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赛事时间"
					prop="race_start_time"
					min-width="180px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="报名截止时间"
					prop="race_end_time"
					min-width="180px"
					show-overflow-tooltip
					align="center"
				/>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos" style="width: 100px">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import Pagination from '@/components/Pagination'
	import { bindRace, getBindRace, unbindRace } from '@/api/user-manager.js'
	import { getList } from '@/api/competition-manage'
	export default {
		name: 'addSponsor',
		components: { Pagination },
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				info: {},
				multipleSelection: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				forms: {
					race_name: ''
				},
				getBindList: []
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		methods: {
			async initData(info = {}) {
				this.info = info
				await this.getBindData()
				this.dialogVisible = true
				this.$nextTick(async () => {
					this.$refs.table.clearSelection()
					await this.loadData()
				})
			},
			async loadData() {
				const loading = this.$setLoading()
				try {
					const res = await getList({
						race_name: this.forms.race_name,
						page_no: this.pageNo,
						page_size: this.pageSize
					})
					this.total = res.data.total
					this.tableData = res.data.lists

					this.$nextTick(() => {
						this.tableData.forEach((item, index) => {
							if (this.getBindList.includes(item.race_id)) {
								this.$refs.table?.toggleRowSelection(item, true)
							}
						})
					})
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			async getBindData() {
				try {
					const res = await getBindRace({
						spon_id: this.info.spon_id,
						page_no: 1,
						page_size: 500
					})
					this.getBindList = res.data.lists.map(item => item.race_id)
				} catch (e) {
					console.log(e)
				}
			},
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			// 保存
			async saveVideos() {
				// if (!this.multipleSelection.length) {
				// 	this.$message.error('请选择要关联的赛事信息！')
				// 	return
				// }

				const loading = this.$setLoading({
					lock: true,
					text: '数据提交中~'
				})

				try {
					const ids = this.multipleSelection.map(item => item.race_id)
					const deleteArr = this.getBindList.filter(item => {
						return !ids.includes(item)
					})
					if (ids.length) {
						const res = await bindRace({
							spon_id: this.info.spon_id,
							race_ids: ids
						})
					}

					// 解绑取消勾选的
					if (deleteArr.length) {
						await unbindRace({
							spon_id: this.info.spon_id,
							race_ids: deleteArr
						})
					}

					this.$message.success('关联设置成功！')
					this.dialogVisible = false
					this.$parent.loadData()
				} catch (err) {
					console.log(err)
					loading.close()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
			.el-form .el-form-item {
				margin-bottom: 16px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>